<template>
    <div class="swipe-div">
        <van-swipe @change="onChange">
            <van-swipe-item v-for="(item, index) in swipeData" :key="index">
                <span  @click="$router.push('/doctor')">{{ item.title }}</span>
                <!-- <img v-lazy="item.url" height="150px"/> -->
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/{{ swipeData.length }}</div>
            </template>
        </van-swipe>
    </div>
</template>

<script>
export default {
    name: "Swipe",
    data() {
        return {
            // 当前下标
            current: 0,
            // 数据
            swipeData: [
                {
                    url: 'https://img.yzcdn.cn/vant/apple-1.jpg',
                    title: "按服务找"
                },
                {
                    url: 'https://img.yzcdn.cn/vant/apple-2.jpg',
                    title: "按医生找"
                }
            ]
        }
    },
    methods: {
        onChange(index) {
            this.current = index;
        },
    }
}
</script>

<style scoped>
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}

.swipe-div {
    height: 100px;
}

.van-swipe-item {
    height: 100px;
    background-color: aqua;
}
</style>